<template>
  <div class="painting-release-wrapper">
    <van-field v-model="text" type="textarea" placeholder="输入作品的描述" rows="5">
      <span class="van-field__counter">{{ counter }}</span>
    </van-field>
    <image-uploader @imageChanged="updateImages"></image-uploader>
    <van-cell-group>
      <van-cell title="作品分类" @click="showAction()" :value="catalog.id ? catalog.name: '选择作品分类'" isLink/>
    </van-cell-group>
    <div class="button-wrapper">
      <button type="button" @click="submit" class="btn btn-yellow">确认发布</button>
    </div>
    <van-popup v-model="actionShow" position="bottom">
      <van-picker show-toolbar :columns="catalogList" @confirm="pickerConfirm" @cancel="pickerCancel" />
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import util from '@/util/util'

// 发布作品
export default {
  name: 'paintingRelease',
  data () {
    return {
      text: '',
      catalog: {},
      images: [],
      catalogs: [],
      actionShow: false,
    }
  },
  computed: {
    counter: function() {
      var textCount = this.text.length
      return textCount + '/140'
    },
    catalogList: function() {
      var actions = []
      for (var i = 0; i < this.catalogs.length; i++) {
        var catalog = this.catalogs[i]
        actions.push(catalog.name)
      }
      return actions
    }
  },
  beforeCreate () {
    var webUrl = window.location.href
    var jsApiList = [
       "chooseImage",
       "previewImage",
       "uploadImage"
    ]
    if (util.isAndroid()) {
      var that = this
      setTimeout(function() {
        that.SDKRegister(that, webUrl, jsApiList)
      }, 500)
    }
  },
  created () {
    this.getCatalogs()
  },
  methods: {
    showAction() {
      this.actionShow = !this.actionShow
    },
    getCatalogs: function() {
      if (this.$store.getters.paintingCatalogs.length) {
        this.catalogs = this.$store.getters.paintingCatalogs
        console.log(this.catalogs)
      }
    },
    pickerConfirm(value, index) {
      this.catalog = this.catalogs[index]
      this.actionShow = false
    },
    pickerCancel() {
      this.actionShow = false
    },
    submit() {
      if (!this.text) {
        return this.$toast.fail('文字内容不能为空')
      }
      if (!this.images.length) {
        return this.$toast.fail('请上传作品图片')
      }
      if (!this.catalog.id) {
        return this.$toast.fail('请选择作品分类')
      }
      var mediaIds = []
      this.images.forEach(function(img) {
        mediaIds.push(img.serverId)
      })
      var media_ids = mediaIds.join(',')
      var params = {
        'text': this.text,
        'catalog': this.catalog.id,
        'media_ids': media_ids
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.post('/works/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          that.$toast.success('作品发布成功')
          that.$router.go(-1)
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.detail)
        } else {
          that.$toast.fail('请求出错')
        }
      })
    },
    updateImages(images) {
      // 更新图片文件列表
      this.images = images
    }
  }
}

</script>
